<template>
  <view class="room">
    <!-- 头部导航 -->
    <view class="w-750 w-bj-white" style="position: fixed; top: 0; left: 0; z-index: 999">
      <view class="h-100 w-row-justify-between-align">
        <view class="wh-80 w-row-center" @click="routerBack()">
          <image class="wh-40" src="../../../static/gane/goBack-icon.png"></image>
        </view>
        <view class="flex1 h-100 w-row-center w-wz-conts font-36">
          <text>{{ typeText[roomInfo.type - 1] }}</text>
        </view>
        <view class="wh-80 w-row-center">
          <!-- <uni-datetime-picker type="datetimerange" @change="changeTiem">
            <image class="wh-50" src="../../../static/gane/rq.png"></image>
          </uni-datetime-picker> -->
        </view>
      </view>
    </view>
    <view class="bwh-120"></view>
    <!-- 头部导航结束 -->

    <view class="content-box padding-top-xs">
      <view class="cover-tw index-bg absolute-default absolute top-bg disflex">
        <view class="padding-sm padding-top-xs padding-bottom-0 chat-user text-color-white number-font flex1">
          <view class="van-row van-row--align-center disflex">
            <view class="van-col van-col--12 rel disflex">
              <image v-if="userInfo.headimgurl" :src="userInfo.headimgurl" mode="widthFix"
                     class="radius-sm avatar fl margin-right-xs"></image>
              <image v-else src="@/static/gane/user.png" mode="widthFix"
                     class="radius-sm avatar fl margin-right-xs"></image>
              <span class="line-height-none text-bold" style="transform: translateY(4rpx)">
								余额：{{user_monye}}
							</span>
              <image src="@/static/gane/0.png" mode="widthFix" class="user-ico-game"></image>
            </view>
            <view class="van-col van-col--12">
              <view class="fr wallet">
                <button class="van-button van-button--default van-button--small margin-left-xs"
                        @click="toIndex">
                  首页
                </button>
                <button class="van-button van-button--default van-button--small margin-left-xs"
                        @click="routerWallet()">
                  充值
                </button>
                <button class="van-button van-button--default van-button--small margin-left-xs"
                        @click="routerWallet()">
                  提现
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
      <scroll-view scroll-y="true" class="chat-box padding-left-sm padding-right-sm padding-top-xs envelope"
                   :scroll-into-view="lastItemId">
        <view class="fl full-width" v-for="(item, index) in list" :key="index" :id="`item${index}`">
          <view class="cell packet" :class="{'cell-r' : item.userId === userInfo.uid}">
            <view class="full-width fl rel">
              <view class="avatar avatar-r">
                <view class="van-image">
                  <image :src="item.headimgurl" class="van-image__img"
                         v-if="item.headimgurl && item.userId == userInfo.uid"></image>
                  <image :src="item.headimgurl" class="van-image__img" v-else-if="item.headimgurl">
                  </image>
                  <image src="@/static/gane/user.png" class="van-image__img" v-else></image>
                </view>
              </view>

              <view class="name name-r">
                <!-- <span class="margin-right-xxs small vip-tag v2"></span> -->
                {{ item.nickname }}
                <!-- <div class="tips" v-if="item.userId == userInfo.uid">自己</div> -->
              </view>

              <view class="chat-item chat-item-r" :class="{
			        open: item.endNumber >= item.number || item.selectShow,
			      }" @click="openHBCover(item)">
                <image class="hongbao" :src="
			          item.endNumber >= item.number || item.selectShow
			            ? hongbaoiconN
			            : hongbaoicon
			        " mode="widthFix"></image>
                <view class="info line-height-sm">
                  <view class="full-width fl">
                    <span> 金额 {{ item.money }} </span>
                    <span class="text-sm">{{ item.endNumber }}/{{ item.number }}</span>
                  </view>

                  <view class="full-width fl">
										<span class="text-sm">{{
                        item.endNumber >= item.number
                            ? "已被领完"
                            : item.selectShow
                                ? "已领取"
                                : "可领取"
                      }}</span>
                    <span v-if="item.type == 3">雷{{ item.leiNumber }}</span>
                  </view>
                </view>
                <view class="bar">
                  <b>微信红包</b>
                </view>
              </view>


            </view>
            <!-- <view class="full-width fl rel">
              <view class="avatar">
                <view class="van-image">
                  <image
                    :src="'/api' + item.headimgurl"
                    class="van-image__img"
                    v-if="item.headimgurl && item.userId == userInfo.uid"
                  ></image>
                  <image
                    :src="item.headimgurl"
                    class="van-image__img"
                    v-else-if="item.headimgurl"
                  >
                  </image>
                  <image
                    src="@/static/gane/81.png"
                    class="van-image__img"
                    v-else
                  ></image>
                </view>
              </view>

              <view class="name">
                <span class="margin-right-xxs small vip-tag v2"></span>
                {{ item.nickname }}
                <div class="tips" v-if="item.userId == userInfo.uid">自己</div>
              </view>

              <view
                class="chat-item"
                :class="{
                  open: item.endNumber >= item.number || item.selectShow,
                }"
                @click="openHBCover(item)"
              >
                <image
                  class="hongbao"
                  :src="
                    item.endNumber >= item.number || item.selectShow
                      ? hongbaoiconN
                      : hongbaoicon
                  "
                  mode="widthFix"
                ></image>
                <view class="info line-height-sm">
                  <view class="full-width fl">
                    <span> 金额 {{ item.money }} </span>
                    <span class="text-sm"
                      >{{ item.endNumber }}/{{ item.number }}</span
                    >
                  </view>

                  <view class="full-width fl">
                    <span class="text-sm">{{
                      item.endNumber >= item.number
                        ? "已被领完"
                        : item.selectShow
                        ? "已领取"
                        : "可领取"
                    }}</span>
                    <span v-if="item.type == 3">雷{{ item.leiNumber }}</span>
                  </view>
                </view>
                <view class="bar">
                  <b>微信红包</b>
                </view>
              </view>
            </view> -->
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="chat-menu full-width text-center">
      <view class="van-row van-row--align-center">
        <view class="van-col van-col--6" @click="toRecord">
          <button class="van-button van-button--default van-button--small van-button--round">
            <view class="van-button__content">
              <image class="icon" src="@/static/gane/record-icon.png" mode=""></image>
              记录
            </view>
          </button>
        </view>
        <view class="van-col van-col--6" @click="openRule">
          <button class="van-button van-button--default van-button--small van-button--round">
            <view class="van-button__content">
              <image class="icon" src="@/static/gane/rule-icon.png" mode=""></image>
              规则
            </view>
          </button>
        </view>
        <view class="van-col van-col--6" @click="toIm()">
          <button class="van-button van-button--default van-button--small van-button--round">
            <view class="van-button__content">
              <image class="icon" src="@/static/gane/customer-icon.png" mode=""></image>
              客服
            </view>
          </button>
        </view>
        <view class="van-col van-col--6" @click="updateList">
          <button class="van-button van-button--default van-button--small van-button--round">
            <view class="van-button__content">
              <image class="icon" src="@/static/gane/refresh-icon.png" mode=""></image>
              刷新
            </view>
          </button>
        </view>
      </view>
    </view>

    <view class="chat-tools">
      <view class="bar">
        <view class="quick text-center" @click="openBetting">
          快捷<br />
          发包
        </view>
      </view>

      <view class="funbar">
        <input type="text" class="input" placeholder="可输入玩法点数" />
      </view>
      <view class="send text-center text-color-white"> 发送 </view>
    </view>

    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
      <view class="gameDetailBox">
        <view class="padding-sm">
          <view class="padding-bottom-sm title font-24b">
            【{{ typeText[roomInfo.type - 1] }}介绍】
            <!-- <view v-html="roomInfo.desc"></view> -->
            <rich-text :nodes="roomInfo.desc"></rich-text>
            <image class="close-icon" src="@/static/index/close-icon.png" @click="closeRoom"></image>
          </view>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="betting" type="bottom" border-radius="10px 10px 0 0">
      <view class="betting">
        <view class="padding-sm">
          <view class="padding-bottom-sm title">
            快捷下注
            <image class="close-icon" src="@/static/index/close-icon.png" @click="closeBet"></image>
          </view>
        </view>

        <view>
          <view class="padding-bottom-sm title sel" v-if="roomInfo.type != 3">
            选玩法
          </view>
          <view class="padding-bottom-sm title sel" v-else> 选雷 </view>
        </view>

        <view class="van-tab__panel">
          <view class="van-row padding-top-sm">
            <view class="van-col van-col--24 padding-xxs padding-top-0" v-if="roomInfo.type != 3">
              <button @click="activeShow = true" :class="{ active: activeShow }"
                      class="van-button van-button--primary van-button--normal van-button--plain van-button--block van-button--hairline van-hairline--surround quickItem">
                <view class="van-button__content">
                  <view class="van-button__text">
                    <span class="name">{{ typeText[roomInfo.type - 1] }}</span>
                  </view>
                </view>
              </button>
            </view>

            <view class="van-col van-col--24 padding-xxs padding-top-0" v-else>
              <view class="lei-title">抢包人数</view>
              <view class="lei-number-box">
                <button @click="selectNumber(item)" :class="number == item ? 'active' : ''"
                        v-for="(item, index) in numberList" :key="index"
                        class="van-button van-button--primary van-button--normal van-button--plain van-button--block van-button--hairline van-hairline--surround quickItem">
                  <view class="van-button__content">
                    <view class="van-button__text">
                      <span class="name">{{ item }}</span>
                    </view>
                  </view>
                </button>
              </view>

              <view class="lei-title">选雷</view>
              <view class="van-row">
                <button @click="selectLei(item)" :class="leiNumber == item ? 'active' : ''"
                        v-for="(item, index) in letNumberList" :key="index"
                        class="van-col--5 van-button van-button--primary van-button--normal van-button--plain van-button--block van-button--hairline van-hairline--surround quickItem">
                  <view class="van-button__content">
                    <view class="van-button__text">
                      <span class="name">雷{{ item }}</span>
                    </view>
                  </view>
                </button>
              </view>
            </view>
          </view>
        </view>

        <view class="submit-bar">
          <view class="van-submit-bar van-safe-area-bottom">
            <view class="van-submit-bar__bar">
              <view class="van-submit-bar__text" style="text-align: left">
                共
                <span class="van-submit-bar__price-integer">{{
                    activeShow ? 1 : 0
                  }}</span>
                注
              </view>

              <button @click="openSubBet" :disabled="!activeShow"
                      class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
                下一步
              </button>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="subbetting" type="bottom" border-radius="10px 10px 0 0">
      <view class="betting">
        <view class="padding-sm">
          <view class="padding-bottom-sm title">
            确认发包金额
            <image class="close-icon" src="@/static/index/close-icon.png" @click="closeSubBet"></image>
          </view>
        </view>

        <view class="van-cell van-field disflex">
          <view class="van-cell__title van-field__label">
            <label for="van-field-4-input">下注金额</label>
          </view>

          <view class="van-cell__value van-field__value">
            <view class="van-field__body">
              <input id="van-field-27-input" type="number" min="1" step="1" v-model="postData.money"
                     class="van-field__control" placeholder="请输入下注金额"  @confirm="handleEnter"/>
            </view>
          </view>
        </view>

        <view class="margin-top-sm title-align"> 快速选择 </view>

        <view class="van-row margin-top-sm">
          <view class="van-col van-col--3 margin-bottom-xs title-align" v-for="(item, index) in priceList"
                :key="index" @click="countPrice(item)">
            <view class="keybordBtn">
              {{ item }}
            </view>
          </view>

          <view class="van-col van-col--3 margin-bottom-xs title-align" @click="postData.money = null">
            <view class="keybordBtn"> 清空 </view>
          </view>
        </view>

        <view class="submit-bar">
          <view class="van-submit-bar van-safe-area-bottom">
            <view class="van-submit-bar__bar">
              <!-- <view class="van-submit-bar__text" style="text-align: left">
                共
                <span class="van-submit-bar__price-integer">1</span>
                注，投注金额<span class="van-submit-bar__price-integer">{{postData.money || 0}}</span>元
              </view> -->

              <button @click="postRedEnvelopes()" style="margin: 0 auto"
                      class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
                确认发包
              </button>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="hbEnvCoverPopup" type="center" :mask-click="false">
      <div class="hbEnvCoverBox" @click="openHB(HBdata)">
        <image @click.stop="closeHB()" class="gb-icon" src="../../../static/gane/gb.png" mode="widthFix">
        </image>
        <view class="title">
          <view class="avatar">
            <view class="van-image">
              <image :src="HBdata.headimgurl" class="van-image__img" v-if="HBdata.headimgurl"></image>
              <image src="@/static/gane/kefu.png" class="van-image__img" v-else></image>
            </view>
          </view>
          <view class="name"> {{ HBdata.nickname }}的红包 </view>
        </view>
      </div>
    </uni-popup>
    <canvas canvas-id="audioComeIn" style="display:none;"></canvas>

  </view>
</template>

<script>
import $H from "@/pages/common/request.js";

import hongbaoicon from "@/static/gane/hongbao.png";
import hongbaoiconN from "@/static/gane/hongbao-n.png";
export default {
  data() {
    return {
      typeText: ["红包接龙", "红包二八杠", "红包扫雷", "红包牛牛"],
      hongbaoicon,
      hongbaoiconN,
      list: [],
      user_monye: 0,
      time: null,
      lastItemId: null,
      postShow: false,
      roomInfo: {},
      postData: {
        //发红包数据
        roomId: 0,
        gameType: 0, //游戏类型
        money: 0, //红包金额
      },
      querFrom: {
        pagenum: 1,
        pagesize: 20,
        type: 1,
      },
      activeShow: false,
      priceList: [10, 50, 100, 500, 1000, 5000],
      price: null,

      numberList: [7, 8, 9],
      number: 7,
      letNumberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      leiNumber: 0,
      submitLoading: false,
      userInfo: {},
      HBdata: {},
    };
  },
  beforeCreate() {
    const isLoading = localStorage.getItem('isLoading')
    if (!isLoading) {
      uni.showLoading({
        title: '数据加载中',
        mask: true
      });
    }
  },

  onLoad(option) {
    this.querFrom.type = this.postData.gameType = option.type;
    if (option.type == 3) {
      this.activeShow = true;
    }
    this.initAudio();

    this.postData.roomId = option.roomId;
    this.querFrom.roomId = option.roomId;
    this.getRoom();
    this.getList();
    this.getUserInfo();

  },

  methods: {
    initAudio() {
      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
      const audioElement = new Audio('/static/mp3/comeIn.mp3');
      const source = audioContext.createMediaElementSource(audioElement);
      source.connect(audioContext.destination);
      audioElement.play(); // 播放音频
    },

    ophbAudio() {
      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
      const audioElement = new Audio('/static/mp3/open.mp3');
      const source = audioContext.createMediaElementSource(audioElement);
      source.connect(audioContext.destination);
      audioElement.play(); // 播放音频
    },

    handleEnter() {
      // 当按下回车键时，调用postRedEnvelopes方法
      this.postRedEnvelopes();
    },
    getUserInfo() {
      $H.post("/app_user_get_userinfo").then((res) => {
        if (res.code == 200) {
          this.userInfo = res.data;

          uni.setStorageSync("UserInfo", res.data);
        }
      });
    },
    selectLei(leiNumber) {
      this.leiNumber = leiNumber;
    },
    selectNumber(number) {
      this.number = number;
    },
    postRedEnvelopes() {
      if (!this.postData.money) {
        return uni.showToast({
          title: "请输入下注金额",
          duration: 1000,
          icon: "none",
        });
      }
      if (this.postData.gameType == 3) {
        //扫雷
        this.postData.number = this.number;
        this.postData.leiNumber = this.leiNumber;
      }
      $H.post("/app_red_envelope_betpour", this.postData).then((res) => {
        if (res.code == 200) {
          this.closeSubBet();
          this.closeBet();
          this.getList();
          return uni.showToast({
            title: "下注成功",
            duration: 1000,
            icon: "none",
          });
        } else {
          return uni.showToast({
            title: res.msg,
            duration: 1000,
            icon: "none",
          });
        }
      });
    },
    getRoom() {
      $H.post("/app_red_envelope_room_odds", {
        type: this.postData.gameType,
        roomId: this.postData.roomId,
      }).then((res) => {
        console.log(res, "getRoom");
        if (res.code == 200) {
          this.roomInfo = res.data;
        }
      });
    },

    getList() {
      $H.post("/app_red_envelope_list", this.querFrom).then((res) => {
        if (res.code == 200) {
          this.list = res.data.data;
          this.user_monye = res.data.user_monye;
          setTimeout(() => {
            this.lastItemId = `item${this.list.length - 1}`;
          }, 10);
          localStorage.setItem('isLoading', true)
          uni.hideLoading();
        }
      });
    },

    toIm() {
      uni.switchTab({
        url: "/pages/im/im",
      });
    },

    openPostBox() {
      this.$refs.post.open();
    },
    closePost() {
      this.$refs.post.close();
    },
    openRule() {
      this.$refs.popup.open();
    },

    closeRoom() {
      this.$refs.popup.close();
    },

    openBetting() {
      if (this.roomInfo.type == 3) {
        this.$refs.betting.open();
      } else {
        this.$refs.subbetting.open();
      }
    },
    closeBet() {
      this.$refs.betting.close();
    },

    openSubBet() {
      this.$refs.subbetting.open();
    },

    closeSubBet() {
      this.postData.money = 0;
      this.$refs.subbetting.close();
    },

    countPrice(num) {
      this.postData.money = Number(this.postData.money)+Number(num);
    },

    closeHB() {
      this.$refs.hbEnvCoverPopup.close();
    },

    // 抢红包
    openHB(item) {
      if (this.submitLoading) return;
      this.submitLoading = true;
      let that = this;
      $H.post("/app_red_envelope_rob", {
        id: item.id,
      }).then((res) => {
        this.submitLoading = false;
        if (res.code == 200) {
          that.ophbAudio();
          uni.navigateTo({
            url: "/pages/game/hongbao/detail?id=" + item.id,
          });
          this.$refs.hbEnvCoverPopup.close();
        } else {
          return uni.showToast({
            title: res.msg,
            duration: 1000,
            icon: "none",
          });
        }
      });
    },

    openHBCover(data) {
      if (data.selectShow) {
        uni.navigateTo({
          url: "/pages/game/hongbao/detail?id=" + data.id,
        });
        return;
      }
      this.HBdata = data;
      this.$refs.hbEnvCoverPopup.open();
    },

    // 更新
    updateList() {
      this.list = [];
      this.getList();
      this.$nextTick(() => {
        this.lastItemId = `item${this.list.length - 1}`;
      });
    },

    updateLastItemId(id) {},
    toIndex() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },

    // 记录
    toRecord() {
      const types = ['jl', '28g', 'sl', 'nn']
      uni.navigateTo({
        url: `/pages/my/record/list?index=2&game_type=${this.querFrom.type}`
      });
    },
  },
  onShow() {
    this.time = setInterval(() => {
      this.getList();
    }, 3000);

    // this.$refs.hbEnvCoverPopup.open()
  },
  onUnload() {
    // console.log('卸载页面-------红包')
    if (this.time) {
      clearInterval(this.time);
      this.time = null;

    }
    localStorage.removeItem('isLoading')

  },
  onHide() {
    if (this.time) {
      clearInterval(this.time)
      this.time = null

    }
    localStorage.removeItem('isLoading')
  },
};
</script>

<style scoped lang="scss">
body {
  background-color: #f0f3ff !important;
  font-size: 3.46667vw;
}

.tips {
  font-size: 14rpx;
  background: #f4af00;
  border-radius: 4rpx;
  width: 44rpx;
  height: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-left: 4rpx;
  margin-top: 4rpx;
}

.hbEnvCoverBox {
  width: 550rpx;
  height: 910rpx;
  background-image: url("@/static/gane/red-envelope-cover.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;

  .gb-icon {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    top: 20rpx;
    right: 20rpx;
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 140rpx;

    .avatar {
      width: 40rpx;
      height: 40rpx;
    }

    .name {
      color: #efe491;
      font-size: 30rpx;
      margin-left: 10rpx;
    }

  }
}

.lei-title {
  font-size: 18px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

.lei-number-box {
  display: flex;

  .lei-btn {
    width: 30%;
  }
}

.van-row {
  display: flex;
  flex-wrap: wrap;
}

.van-col--5 {
  flex: initial;
  flex: 0 0 20.83333333%;
  max-width: 20.83333333%;
  width: 20%;
}

.van-col {
  display: block;
  box-sizing: border-box;
  min-height: 1px;
}

.room {
  .gameDetailBox {
    padding-bottom: 140rpx;
    background-color: #fff;
    font-size: 24rpx !important;
    color: #535d76;
    line-height: 50rpx;

    .title {
      position: relative;
      padding-right: 60rpx;

      .close-icon {
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        top: 0;
        margin-top: 10rpx;
        right: 0;
      }
    }
  }

  .betting {
    padding-bottom: 200rpx;
    background-color: #fff;

    color: #535d76;
    line-height: 50rpx;

    .title {
      text-align: center;
      position: relative;
      padding: 0 60rpx;
      font-size: 30rpx !important;

      .close-icon {
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        top: 0;
        margin-top: 10rpx;
        right: 0;
      }
    }

    .sel {
      &:before {
        content: "";
        position: absolute;
        bottom: -10rpx;
        left: 0;
        z-index: 1;
        width: 10.66667vw;
        height: 0.8vw;
        background: #f4af00;
        border-radius: 0.8vw;
        transform: translateX(375rpx) translateX(-50%);
        transition-duration: 0.3s;
      }
    }

    .quickItem {
      background-color: #fff !important;
      color: #f4af00 !important;
      // margin:15rpx;
    }

    .active {
      background-color: #f4af00 !important;
      color: #fff !important;
    }

    .van-field__label {
      margin-bottom: 0;
    }

    .submit-bar {
      position: fixed;
      bottom: -1px;
      left: 0px;
      right: 0px;
      height: 14.93333vw;
      background-color: #fff;
      border-top: 1px solid #f4f4f4;
      z-index: 6500;

      .van-submit-bar__bar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 13.33333vw;

        padding: 0 4.26667vw;
        font-size: 3.73333vw;

        .van-submit-bar__text {
          flex: 1;
          line-height: 13.33333vw;
          padding-right: 3.2vw;
          color: #323233;
        }
      }
    }
  }

  ::v-deep .uni-popup {
    z-index: 1000;
  }

  .w-row-center {
    color: #323233 !important;
    font-weight: 600;
    font-size: 4.26667vw;
  }

  .bwh-120 {
    background-color: #f0f3ff !important;
  }

  .content-box {
    height: calc(100% - 26.93333vw);
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1;
    padding-bottom: 3.2vw;
    bottom: 14.13333vw;
    top: 12.8vw;

    .chat-user {
      .avatar {
        width: 8.53333vw;
        transform: translateY(0.53333vw);
        background-color: transparent;
      }


    }



    .index-bg {
      background-image: url("@/static/gane/header-bg.png");
      background-repeat: no-repeat;
      background-size: 100% auto;
      height: 14.66667vw;
    }

    .van-button {
      padding: 0 4vw;
      height: 6.93333vw !important;
      line-height: 6.93333vw !important;
      background-color: #fffc;
      font-size: 3.2vw;
      color: #323233;
    }

    .chat-box {
      width: 100%;
      position: absolute;
      top: 42.66667vw;
      bottom: 16.8vw;
      left: 0px;
      right: 0px;
      overflow-y: scroll;
      overflow-x: hidden;

      .cell {
        width: 100%;
        float: left;
        position: relative;
        margin-bottom: 4vw;
      }


    }

    .envelope {
      top: 16vw;
    }

    .name {
      font-size: 3.2vw;
      color: #a5a5a5;
      width: calc(100% - 15.46667vw);
      float: right;
      line-height: 5.33333vw;
      display: flex;
      // align-items: center;
    }



    .small {
      width: 11.46667vw;
      height: 4.26667vw;
      transform: translateY(0.8vw);
    }

    .vip-tag {
      background-repeat: no-repeat;
      background-size: auto 100%;
      display: inline-block;
    }

    .open {
      background-color: #fce1c3 !important;

      &::after {
        color: #fce1c3 !important;
      }
    }

    .chat-item {
      background-color: #fa9e3b;
      width: 59.73333vw;
      padding: 3.2vw 2.66667vw 9.06667vw;
      font-size: 3.73333vw;
      min-width: 16vw;
      max-width: 67%;
      line-height: 5.33333vw;
      border-radius: 1.6vw;
      word-wrap: break-word;
      word-break: break-all;
      margin: 0 0 0 3.2vw;
      float: left;
      position: relative;
      min-height: 12.26667vw;

      &::after {
        color: #fa9e3b;
        content: "\25c6";
        position: absolute;
        top: 3.46667vw;
        left: -2.13333vw;
        font-size: 5.33333vw;
        line-height: 5.33333vw;
      }

      .hongbao {
        width: 12vw;
        height: 100rpx;
        float: left;
      }

      .info {
        margin-left: 14.13333vw;
        color: #fff;
        text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;

        .full-width {
          &>span:nth-child(2) {
            float: right;
          }
        }

      }

      .bar {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 5.86667vw;
        line-height: 5.86667vw;
        font-size: 3.2vw;
        padding: 0 2.66667vw;
        border-radius: 0 0 1.6vw 1.6vw;

        &::before {
          content: "";
          position: absolute;
          top: 0px;
          left: 2.66667vw;
          right: 2.66667vw;
          border-top: 1px solid rgba(255, 255, 255, 0.6);
        }

        b {
          position: relative;
          float: left;
          transform: scale(0.9);
          color: #fff9;
        }
      }
    }


  }

  .cell-r {
    float: right !important;
    padding-right: 8vw;

    .avatar-r {
      float: right !important;
    }

    .name-r {
      justify-content: right;
      float: left;
    }

    .chat-item-r {
      margin: 0 3.2vw 0 0;
      float: right;

      &::after {
        right: -2.13333vw;
        left: auto !important;
      }
    }
  }

  .chat-menu {
    position: fixed;
    right: 0px;
    bottom: 15.46667vw;
    height: 10.66667vw;
    z-index: 5;
    background-color: #f7f8fd;
    line-height: 6.4vw;
    padding-top: 1.33333vw;

    .van-button--round {
      padding: 0px 4vw;
    }

    .van-button__content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;

      .icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
    }
  }

  .chat-tools {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 15.46667vw;
    z-index: 1001;
    background-color: #f7f8fd;
    display: flex;
    align-items: center;
    width: 100%;
    z-index: 998;

    .bar {
      margin-left: 3.2vw;
    }

    .quick {
      width: 11.2vw;
      height: 11.2vw;
      padding: 0.5vw 0 0;
      color: #678cf0;
      border: 1px solid #acbbe2;
      background: url();
      border-radius: 1.06667vw;
    }

    .funbar {
      width: 0;
      flex: 1;
      background-color: #fff;
      border-radius: 1.06667vw;
      height: 11.2vw;
      line-height: 11.2vw;
      text-align: center;
      font-size: 4.26667vw;
      margin-left: 3.2vw;

      .input {
        width: 100%;
        height: 100%;
        text-align: left;

        .input-placeholder {
          color: #969799;
        }
      }
    }

    .active {
      width: calc(100% - 32.53333vw);
    }

    .send {
      width: 140rpx;
      height: 9.06667vw;
      line-height: 9.06667vw;
      padding: 0;
      margin-top: 1.06667vw;
      background: #07c160;
      border-radius: 1.06667vw;
      margin: 0 3.2vw;
    }
  }
}
</style>